<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .banner{
            width: 790px;
            height: 340px;
            border: 1px solid skyblue;
            margin: 50px auto;
            position: relative;
        }
        .banner li{
            list-style: none;
        }
        .banner ul li{
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: all 0.5s;
        }
        .banner ul li.show{
            opacity: 1;
        }
        .banner ol{
            width: 200px;
            position: absolute;
            left: 50%;
            margin-left: -100px;
            bottom: 30px;
        }
        .banner ol li{
            width: 20px;
            height: 20px;
            background-color: blue;
            text-align: center;
            border-radius: 50%;
            line-height: 20px;
            float: left;
            margin-right: 5px;
            color: #fff;
        }
        .banner ol li.active{
            background-color: yellow;color: #000;
        }
        .leftarrow,.rightarrow{
            text-decoration: none;
            position: absolute;
            top: 50%;
            font-size: 100px;
            margin-top: -70px;
            color: #fff;
            display: none;
        }
        .leftarrow{
            left: 20px;
        }
        .rightarrow{
            right: 20px;
        }

    </style>
</head>
<body>
    <!-- 轮播图 -->
    <div class="banner">
        <!-- 准备8张图片 -->
        <ul>
            <li class="show"><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
            <li><img src="./img/5.jpg" alt=""></li>
            <li><img src="./img/6.jpg" alt=""></li>
            <li><img src="./img/7.jpg" alt=""></li> 
            <li><img src="./img/8.jpg" alt=""></li>
        </ul>
        <!-- 准备8个小圆圈 -->
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ol>
        <!-- 准备 左右箭头 -->
        <a href="#" class="leftarrow">&lt;</a>
        <a href="#" class="rightarrow">&gt;</a>
    </div>
    <!-- 轮播图 -->
    <!-- 1,布局:8张图片通过定位层叠起来的
    2.鼠标移入移出整个盒子,显示隐藏对应的左右箭头
    3.鼠标移入onmouseover,显示不同的图片
    4.点击箭头,图片有秩序的切换,而且点到了最后一张,继续点击则切换回来第一张那个
    5.自动轮播 -->
    <script>
        // 1.获取方法,封装函数
        function $(selector,flag) {
            if(flag){
                return document.querySelectorAll(selector)
            }else{
                return document.querySelector(selector)
            }
        }
        var banner=$('.banner');//获取banner对象
        var picLi=$("div ul li",'all');//获取8张图片
        var btnLi=$("div ol li",'all');//获取8个小圆圈 
        var leftArrow=$('.leftarrow');//左箭头
        var rightArrow=$('.rightarrow');//右箭头
        var outerIndex=0;//接收index
        var time=null;//定时器的返回值

        // 2.鼠标移入移出整个盒子,显示隐藏对应的左右箭头
        banner.onmouseover=function(){
            leftArrow.style.display="block";
            rightArrow.style.display="block";
            // 关闭定时器
            clearInterval(time);
        }
        banner.onmouseout=function(){
            leftArrow.style.display="none"
            rightArrow.style.display="none"
            time=setInterval(function(){
                rightArrow.onclick();//被动变主动
            },3000)
        }

        // 3.鼠标移入onmouseover,显示不同的图片
        // 遍历
        //思路:每次移入鼠标对应的圆圈,切换到对应的图
        btnLi.forEach(function(ele,index){//ele元素.index每个圆点的索引值
            // console.log(ele);
            ele.onmouseover=function(){
                outerIndex= index
                // 当前的索引给到全局的索引
            }
        })

        // 核心:点击切换的核心是索引的切换,如果索引改变了,切换跟着改变
        // 4.点击箭头,图片有秩序的切换,而且点到了最后一张,继续点击则切换回来第一张那个
        rightArrow.onclick=function(){
            outerIndex++;//每次点击箭头,索引+1
            // 限定索引范围
            if(outerIndex>btnLi.length-1){
                outerIndex=0;//重置为第一张
            }
            tabSwitch()
        }
        leftArrow.onclick=function(){
            outerIndex--;//每次点击箭头,索引-1
            // 限定索引范围
            if(outerIndex<0){
                outerIndex=btnLi.length-1//重置为第8章,最后一张
            }
            tabSwitch()
        }

        // 5.定时器 自动轮播
        // 思路:每隔3秒,让右键事件主动触发
        time=setInterval(function () {
            rightArrow.onclick();
        },1000)

        // 6.切换过程
       function tabSwitch(){
            btnLi.forEach(function (btn,i) {
                btn.className="";
                picLi[i].className="";
            })
            btnLi[outerIndex].className="active";
            picLi[outerIndex].className="show";
       }
       


    </script>
</body>
</html>